<template>
    <div>
        <!-- 面包屑导航区域 -->
        <breadcrumb :nav-data="['订单管理','订单列表']"></breadcrumb>
        <el-card>
            <el-row :gutter="20">
                <el-col :span="10">
                    <el-input v-model="queryInfo.query" width="200px" placeholder="请输入内容">
                        <el-button icon="el-icon-search" slot="append"></el-button>
                    </el-input>
                </el-col>
            </el-row>
            <!--            表格-->
            <el-table
                :data="tableData" border style="width: 100%">
                <el-table-column type="index"></el-table-column>
                <el-table-column prop="order_number" label="订单编号"></el-table-column>
                <el-table-column prop="order_price" label="订单价格"></el-table-column>
                <el-table-column prop="order_pay" label="是否付款">
                    <template slot-scope="scope">
                        <!--<span>{{scope.row.order_pay}}</span>-->
                        <el-tag v-if="scope.row.order_pay==2">已付款</el-tag>
                        <el-tag v-if="scope.row.order_pay==0" type="danger">未付款</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="is_send" label="是否发货"></el-table-column>
                <el-table-column prop="create_time" label="下单时间">
                    <template slot-scope="scope">
                        {{scope.row.create_time | dateFormat}}
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <!--作用域插槽-->
                        <el-tooltip class="item" effect="dark" content="修改订单地址" placement="top">
                            <el-button @click="dialogVisible=true" type="primary" size="mini"
                                       icon="el-icon-edit"></el-button>
                        </el-tooltip><!--                        分配权限-->
                        <el-tooltip class="item" effect="dark" content="物流信息" placement="top">
                            <el-button @click="onProgressBtnClick(scope.row.order_number)" type="success" size="mini" icon="el-icon-location"></el-button>
                        </el-tooltip>
                    </template>
                </el-table-column>
            </el-table>
            <!--            分页-->
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="queryInfo.pagenum"
                :page-sizes="[10, 15, 20, 25]"
                :page-size="queryInfo.pagesize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </el-card>

        <!--修改地址对话框-->
        <el-dialog title="修改收货地址" :visible.sync="dialogVisible" width="50%">
            <!--添加表单-->
            <el-form :model="addressForm" :rules="addressFormRules" ref="addressFormRef" label-width="100px">
                <el-form-item label="省市区/县" prop="address1">
<!--                    <el-cascader style="width:100%" size="mini" :options="cityData" v-model="addressForm.address1"></el-cascader>-->
                </el-form-item>
                <el-form-item label="详细地址" prop="address2">
                    <el-input v-model="addressForm.address2"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>
        <!--展示物流信息对话框-->
        <el-dialog title="物流进度" :visible.sync="progressVisible" width="50%">
            <!--添加表单-->
            <el-timeline>
                <el-timeline-item
                    v-for="(activity, index) in activities"
                    :key="index"
                    size="large"
                    :icon="index===0?'el-icon-location':''"
                    :color="index===0?'#0bbd87':''"
                    :timestamp="activity.time">
                    {{activity.context}}
                </el-timeline-item>
            </el-timeline>
            <span slot="footer" class="dialog-footer">
                <el-button @click="progressVisible = false">取 消</el-button>
                <el-button type="primary" @click="progressVisible = false">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
// import cityData from "./cityData"

export default {
    name: "Orders.vue",
    created() {//vue组件创建后  //发起请求获取数据
        this.getOrdersList();
    },
    mounted() {//vue组件挂载后  获取真实DOM元素
        // let h2 = document.getElementById("order_title");
        // console.log("vue组件挂载后",h2)
    },
    data() {
        return {
            activities: [],
            // cityData: cityData,
            total: 0,//数据总数
            queryInfo: {
                query: "", //默认搜索条件
                pagenum: 1, //当前页
                pagesize: 10, //每页显示多少条
            },
            msg: "哈哈",
            tableData: [],
            dialogVisible: false, //修改地址对话框弹出和隐藏
            addressForm: {
                address1: "",
                address2: ""
            },
            addressFormRules: {
                address1: [{ required: true, message: '请选择省市区', trigger: 'blur'}],
                address2: [{ required: true, message: '请输入详细地址', trigger: 'blur'}],
            },
            progressVisible: false //物流信息提示框
        }
    },
    methods: {
        getOrdersList() {
            this.$http.get("/orders", {
                params: this.queryInfo
            }).then((res) => {
                let data = res.data.data;
                //data = {  goods: []
                //          pagenum: "1"
                //          total: 27}

                this.tableData = data.goods;
                this.total = data.total;
            })
        },


        //切换每页显示多少条触发的回调函数
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        //修改页码的时候触发的回调函数
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
        },

        //点击查看物流信息
        onProgressBtnClick(id){
            //发起查看物流信息的请求
            console.log("订单编号===>",id);
            this.$http.get(`/kuaidi/${id}`).then((res)=>{
                console.log(res);
                this.activities = res.data.data
            }).catch((err)=>{

            })



            this.progressVisible = true
        }
    }
}
</script>

<style scoped>

</style>